<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>千峰教育大前端Vue教学</title>
  <!-- 引入vue -->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <style>
    .container { display: flex; flex-direction: row; border: 1px solid #d3d3d3; width: 150px; }
    .head { width: 30px; height: 30px; border-radius: 20px; margin-right: 10px; } 
    .content { color: red; }
    .surname { display: flex; justify-content: center; align-items: center; font-size: 20px; color: black; background-color: #d3d3d3; border-radius: 30px; }
  </style>
</head>

<body style="margin:100px;font-size:22px;">
  <!-- 定义一个容器 -->
  <div id="app">
    <!-- 入口只加载App -->
    <App></App>
  </div>
  <script>
    // 定义SimpleButton组件
    const SimpleButton = {
      template: `
      <button @click="onClick"><slot></slot></button>
      `,
      methods: {
        onClick() {
          alert('操作成功');
          console.log('=================', this.$slots);
        }
      },
    };
    // 定义HeadButton组件
    const HeadButton = {
      template: `
      <div class="container">
        <div class="head"><slot name="head" :size="30"></slot></div>
        <div class="content"><slot></slot></div>
      </div>
      `,
    };
    // 定义App组件
    // 具名插槽使用 <template v-slot:name>来访问，简写是#name，如果需要参数，使用#name={param}的形式获取，获取到的参数在所在的 template 里面有效
    // template 里面的内容为具名插槽的内容，其他的为默认插槽的内容
    const App = {
      template: `
      <div>
        <SimpleButton>加入购物车</SimpleButton>
        <br>
        <SimpleButton>立即购买</SimpleButton>
        <br>
        <HeadButton>
          <template v-slot:head="{ size }">
            <img src="./head.jpg" :style="{ width: size+'px', height: size+'px' }" />
          </template>
          方运江
        </HeadButton>
        <HeadButton>
          <template #head="{ size }">
            <div class="surname">孙</div>
          </template>
          孙悟空
        </HeadButton>
      </div>
      `,
      components: {
        SimpleButton,
        HeadButton,
      },
    };
    // 创建应用
    const app = Vue.createApp({
      // 初始化数据函数
      components: {
        App, // 声明组件
      },
    });
    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>